// 路由封装
// 因为我们要用Vue去加载它
import Vue from 'vue';
import Router from 'vue-router';
// import { createRouter, createWebHashHistory } from 'vue-router';

// 根路由组件
import Home from './views/home';
import Login from './views/login';
import Register from './views/register';
import Cart from './views/cart';
import Order from './views/order';

// 子路由组件

// Home的子路由
import Index from './views/index';
import Product from './views/product';
import Detail from './views/detail';
import Search from './views/search.vue';

// Order的子路由

/* 
  上述组件导入方式也可以使用
  () = > import('路径地址') 代替 导入
*/

// 通过Vue的方式去加载插件
Vue.use(Router);

// 使用export default方式去导出，导出一个Router对象
// Vue路由语法
export default new Router({
	// 开始配置
	// 使用 routes 属性进行配置，其作用是配置一系列的子路由
	routes: [
		// 首页
		{
			path: '/',
			name: 'home',
			// 引入组件
			component: Home,
			// 重定向
			redirect: '/index',
			// 加载子路由
			children: [
				{
					path: '/index',
					name: 'index',
					component: Index
				},
				// 商品展示
				{
					// 动态子路由，每个产品是对应一个id的
					path: '/product/:id',
					name: 'product',
					component: Product
				},
				// 商品详情
				{
					path: '/detail/:id',
					name: 'detail',
					component: Detail
				},
				//搜索页面
				{
					path: '/search/:id',
					name: 'search',
					component: Search
				},
				// 登录
				{
					path: '/login',
					name: 'login',
					component: Login
				},

				// 注册
				{
					path: '/register',
					name: 'register',
					component: Register
				}
			]
		},

		// 订单页面
		{
			path: '/order',
			name: 'order',
			component: Order,
			children: [
				// 订单列表
				{
					/* 
            path 、 name名字可以自己随便取，name名字要和vue页面中name命名一致
          */
					path: 'list',
					name: 'order-list',
					component: () => import('./views/orderList.vue')
				},
				// 订单确认
				{
					path: 'confirm',
					name: 'order-confirm',
					component: () => import('./views/orderConfirm.vue')
				},
				//订单支付
				{
					path: 'pay',
					name: 'order-pay',
					component: () => import('./views/orderPay.vue')
				},
				// 购物车
				{
					path: '/cart',
					name: 'order-cart',
					component: Cart
				},
				// 支付宝跳转页面
				{
					path: '/alipay',
					name: 'order-alipay',
					component: () => import('./views/alipay.vue')
				}
			]
		}

		//
	]
});
